<template>
	<!-- 不能用v-if (i: 每个tab页的专属下标;  index: 当前tab的下标; 申明在 MescrollMoreItemMixin )-->
	<view class="folder-list" :class="APPTheme">
		<!-- mescroll-body跟随page滚动, 不可fixed定位, 可设置 top, bottom, topbar, bottombar, safearea的偏移量-->
		<mescroll-uni ref="mescrollRef" style="z-index: 1;" :height="scrollHeight" @init="mescrollInit" :down="downOption"
		 :up="upOption" @down="downCallback" @up="upCallback">
			<checkbox-group @change="checkboxChange">
				<label class="list-item theme-bg-active" v-for="(item,index) in list" :key="index" @longtap="longtapCheck" @tap="navigateToFn(item)">
					<view class="i-left" v-if="isCheckbox">
						<checkbox :value="JSON.stringify(item)" :checked="item.checked" />
					</view>
					<view class="i-left">
						<image v-if="item.suffix" :src="computedFileType(item)"></image>
						<image v-else src="../../../../static/image/filemanag/wenjianja.png"></image>
					</view>
					<view class="i-center">
						<view class="i-center-top u-skeleton-fillet lz-ellipsis-1">{{item.filingName}}</view>
						<view class="i-center-bottom u-skeleton-fillet">
							<text>{{computeFileSize(item.fileSize)}}</text><text>·</text><text>{{ $lizhao.timeFrom(new Date(item.createDate).getTime(),'yyyy-mm-dd hh:MM:ss') }}</text>
						</view>
					</view>
					<view class="i-right" @click.stop="ThemeFn('show',item)">
						<uni-icons type="settings" color="#00aaff"></uni-icons>
					</view>
				</label>
			</checkbox-group>
		</mescroll-uni>
		<!-- <u-empty text="暂无数据" class="u-empty" mode="data" v-if="list.length==0" :margin-top="10"></u-empty> -->
		<view class="folder-footer theme-bg theme-border-top-auto theme-border-bottom-auto" :style="{bottom:footerBotttom}"
		 v-if="isCheckbox">
			<view class="foot-item" @click="initFn">取消</view>
			<view class="foot-item" @click="checkboxChangeAll">{{checkbox.isSelectText}}</view>
			<view class="foot-item" :class="checkbox.checkboxList.length==0?'foot-item-wei':''" @click="moveTo()">移动</view>
			<view class="foot-item" :class="checkbox.checkboxList.length==0?'foot-item-wei':''" @click="deleteFile()">删除</view>
		</view>
		<!-- 操作菜单 -->
		<uni-popup ref="popupTheme" type="center" :animation="true">
			<view class="popupTheme theme-bg-auto2">
				<view class="Themetitle lz-ellipsis-1">{{popup.title}}</view>
				<view class="Themecenter">
					<view class="listItem" v-if="menu.data&&menu.data.fileType!=0" @click="onlineEditFn">在线编辑</view>
					<view class="listItem" @click="forwardFn">转发副本</view>
					<view class="listItem" @click="newNameFn">重命名</view>
					<view class="listItem">历史版本</view>
					<view class="listItem" @click="deleteFile('one')">删除</view>
					<view class="listItem">详细信息</view>
				</view>
				<view class="Themefoot" @click="ThemeFn('close')">取 消</view>
			</view>
		</uni-popup>
		<!-- 对话框 -->
		<uni-popup ref="dialogInput" type="dialog">
			<uni-popup-dialog mode="input" :title="menu.data&&menu.data.filingName" subTitle="请输入新命名" placeholder="请输入新命名"
			 :value="menu.data&&menu.data.filingName" type="error" @confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	let that
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js";
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	export default {
		mixins: [MescrollMixin,MescrollMoreItemMixin],
		components: {
			uniPopupDialog
		},
		props: {
			list: {
				type: Array,
				default: () => {
					return []
				}
			},
			//是否开启长按多选功能
			showCheckbox: {
				type: Boolean,
				default: false
			},
			//局部滚动高度
			scrollHeight: {
				type: String,
				default: '100%'
			},
			//底部操作菜单位置
			footerBotttom: {
				type: String,
				default: '0'
			},
		},
		data() {
			return {
				isCheckbox: false, //是否启用多选
				value: '121',
				//多选
				checkbox: {
					isSelectAll: false, //是否全选
					isSelectText: "全选",
					list: [], //列表
					checkboxList: [], //已选择的列表
				},
				//弹出层
				popup: {
					title: ''
				},
				//下拉配置
				downOption: {
					autoShowLoading: true, // 显示下拉刷新的进度条
					textColor: "#FF8095" // 下拉刷新的文本颜色
				},
				//上拉配置
				upOption: {
					use: true, // 上拉
					empty: {
						use: true,
						icon: '',
						tip: '暂无数据'
					},
					toTop: {
						src: '' // 不显示回到顶部按钮
					}
				},
				//点击菜单
				menu: {
					data: uni.getStorageSync('folder_menu_data') || null, //当前点击行参数
				},
				//转发副本
				forward: {
					employeesList: [], //已选择人
					departmentsList: [], //已选择组织
					roleList: [], //已选择的角色
				},
			}
		},
		computed: {
			...mapGetters(['APPTheme', 'userInfo', 'api']),
			//计算图片属性
			computedFileType() {
				let that = this
				return (item) => {
					return that.$lizhao.lzfile.lzGetFileType(item.suffix)
				}
			},
			//计算文件大小
			computeFileSize() {
				let that = this
				return (size) => {
					return that.$lizhao.lzfile.lzGetFileSize(size)
				}
			}
		},
		mounted() {
			that = this
			//监听到已选转发人
			uni.$off('mail_confirm')
			uni.$on('mail_confirm', (res) => {
				that.forward = res
				that.forWordFile()
			})
		},
		methods: {
			//初始化
			initFn() {
				let that = this
				that.isCheckbox = false
			},
			longtapCheck() {
				let that = this
				if (that.showCheckbox) { //当前是否开启多选
					that.isCheckbox = true
				}
			},
			// 多选
			checkboxChange(e) {
				let that = this
				that.checkbox.checkboxList = e.detail.value.map(item => {
					return JSON.parse(item)
				})
				console.log(that.checkbox.checkboxList);
			},
			//查看详情
			navigateToFn(item) {
				let that = this
				try {
					//先隐藏原生子窗口否则有问题
					//#ifdef APP-PLUS
					uni.getSubNVueById('docDrawer').hide();
					//#endif
				} catch (e) {
					//TODO handle the exception
				}

				if (that.isCheckbox) {
					return
				}
				console.log(item)
				if (item.fileType == 0) { //文件夹
					uni.navigateTo({
						url: '/pages/document/folder/folder?option=' + JSON.stringify(item),
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				} else if (item.fileType == 1) { //word
					//打开文件
					that.openDocument(item)
				}

			},
			//打开文件
			openDocument(item) {
				uni.showLoading({
					title: '文件打开中...',
					mask: false
				});
				uni.downloadFile({
					url: that.GLOBAL.wps_svr + item.filePath,
					success: function(res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							success: function(res) {
								console.log('打开文档成功');
								uni.hideLoading()
							},
							fail(error) {
								uni.hideLoading()
								uni.showToast({
									title: '打开失败',
									icon: 'none'
								});
							}
						});
					},
					fail(error) {
						uni.hideLoading()
						uni.showToast({
							title: '打开失败',
							icon: 'none'
						});
					}
				});
			},
			//下拉刷新
			downCallback() {
				let that = this
				console.log('下拉刷新');
				that.$emit('dow', that)
			},
			//上拉加载
			upCallback(page) {
				let that = this
				console.log('上拉加载');
				page._that = that
				that.$emit('up', page)
			},
			//全选
			checkboxChangeAll() {
				let that = this
				if (that.checkbox.isSelectAll) { //取消全选
					that.$set(that.checkbox, 'isSelectAll', false)
					that.checkbox.isSelectText = '全选'
					console.log('取消全选');
					that.list.map(res => {
						that.$set(res, 'checked', false)
					})
					console.log(that.list);
				} else { //全选
					that.$set(that.checkbox, 'isSelectAll', true)
					that.checkbox.isSelectText = '取消全选'
					that.list.map(res => {
						that.$set(res, 'checked', true)
					})
					console.log(that.list);
				}
			},
			//点击操作菜单
			ThemeFn(type, item) {
				let that = this
				if (type == 'show') {
					console.log('点击菜单', item);
					that.menu.data = item
					//存储下当前点击的信息，否则$on函数触发后that.menu.data值会还原【组件中存在的现象】
					uni.setStorageSync('folder_menu_data', item)
					this.$refs.popupTheme.open()
					that.popup = {
						title: item.filingName
					}
				} else {
					this.$refs.popupTheme.close()
				}
			},
			//移动到
			moveTo() {
				let that = this
				let checkboxListId = that.checkbox.checkboxList.map(item => {
					return item.id
				})
				let req = {
					menu: that.menu.data,
					checkboxListId: checkboxListId //已选择的文件id
				}
				uni.navigateTo({
					url: '/pages/document/folderMove/folderMove?option=' + encodeURIComponent(JSON.stringify(req)),
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			//删除文件及文件夹
			deleteFile(type) {
				let that = this
				that.$refs.popupTheme.close()
				uni.showModal({
					title: '提示',
					content: '确认将文件移入到回收站？',
					success: function(res) {
						if (res.confirm) {
							let checkboxListId = that.checkbox.checkboxList.map(item => {
								return item.id
							})
							let req = {
								ids: checkboxListId, //文件名
							}
							if (type == 'one') { //删除一个
								req = {
									ids: that.menu.data.id, //文件名
								}
							}
							that.GLOBAL.doGet(that.api.GLOBAL_admin_rest_biz_filingCabinets_delete, req).then(res => {
								if (res.code == '0') {
									uni.showToast({
										title: res.data.msg,
										icon: 'none'
									});
									if (res.data.flag) {
										//更新父级列表
										uni.$emit('folderMove_save', true)
										that.isCheckbox = false
									}
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			//在线编辑
			onlineEditFn() {
				let that = this
				console.log(that.menu.data);
				let req = {
					_w_fname: that.menu.data.filingName, //文件名
					parentId: that.menu.data.parentId, //父文件夹id
					filingType: that.menu.data.filingType, //文件柜类型
				}
				that.GLOBAL.doGet(that.api.GLOBAL_v1_api_file_getUrl, req).then(res => {
					if (res.code == '0') {
						let wps = {
							wpsUrl: encodeURIComponent(res.data.wpsUrl),
							token: res.data.token,
						}
						uni.navigateTo({
							url: `../WPS/WPS?wpsUrl=${wps.wpsUrl}&token=${wps.token}`,
							success: res => {},
							fail: () => {},
							complete: () => {}
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				})
			},
			//重命名
			newNameFn() {
				let that = this
				that.$refs.popupTheme.close()
				that.$refs.dialogInput.open()
			},
			//点击确认重命名
			dialogInputConfirm(fn, item) {
				let that = this
				console.log(item);
				let req = {
					id: that.menu.data.id,
					name: item
				}
				that.GLOBAL.doPost(that.api.GLOBAL_admin_rest_biz_filingCabinets_newName, req).then(res => {
					that.$refs.dialogInput.close()
					if (res.code == '0' && res.data.flag) {
						uni.showToast({
							title: res.data.msg,
							icon: "success"
						});
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: "none"
						});
					}
				})

			},
			//转发副本
			forwardFn() {
				let that = this
				that.$refs.popupTheme.close()
				let data = {
					employeesList: [], //已选择人
					departmentsList: [], //已选择组织
					roleList: [], //已选择的角色
				}
				uni.navigateTo({
					url: '/pages/workbench/selectionMethod/selectionMethod?title=转发人&data=' + JSON.stringify(data)
				});

			},
			//转发确认
			forWordFile() {
				let that = this
				console.log(that.forward);
				console.log(that.menu.data);
				let req = {
					userId: that.forward.employeesList[0].id, //人id
					id: that.menu.data.id //文件id
				}
				that.GLOBAL.doPost(that.api.GLOBAL_admin_rest_biz_filingCabinets_forWordFile, req).then(res => {
					if (res.code == '0') {

					}
				})

			}
		}
	};
</script>

<style scoped lang="scss">
	@import './folder-list.scss';
</style>
